<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="root"></div>
  <script>
    //虚拟DOM
    let vdom = {
      "type": "div",
      "key": "A1",
      "props": {
        "id": "A1",
        "children": [
          {
            "type": "div",
            "key": "B1",
            "props": {
              "id": "B1",
              "children": [
                {
                  "type": "div",
                  "key": "C1",
                  "props": { "id": "C1" },
                },
                {
                  "type": "div",
                  "key": "C2",
                  "props": { "id": "C2" },
                }
              ]
            },
          },
          {
            "type": "div",
            "key": "B2",
            "props": { "id": "B2" },
          }
        ]
      },
    }
    //以前我们直接把vdom渲染成了真实DOM
    function render(vdom, container) {
      //根据虚拟DOM生成真实DOM
      let dom = document.createElement(vdom.type);
      //把除children以外的属性拷贝到真实DOM上
      Object.keys(vdom.props).filter(key => key !== 'children').forEach(key => {
        dom[key] = vdom.props[key];
      });
      //代码执到此，想中断，无法实现断点续执行
      //把此虚拟DOM的子节点，也渲染到父节点真实DOM上
      if (Array.isArray(vdom.props.children)) {
        vdom.props.children.forEach(child => render(child, dom));
      }
      container.appendChild(dom);
    }
    render(vdom, document.getElementById('root'));
  </script>
</body>

</html>